<!-- 更多功能 – 拆分账单 - 弹窗组件 -->
<template>
  <CustomDialog v-model:visible="dialogVisible" top="15vh" width="60%">
    <div class="split-bill-dialog">
      <div class="title">拆分账单</div>
      <div class="content">
        <el-alert
          title="拆分账单功能暂未实现，敬请期待！"
          type="info"
          :closable="false"
          show-icon
        />
      </div>
      <div class="btn-group">
        <el-button class="cancel-btn" @click="handleCancel">关闭</el-button>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CustomDialog from '@/components/CustomDialog/Index.vue'

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false
})

const emit = defineEmits<Emits>()

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})

// 取消操作
const handleCancel = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.split-bill-dialog {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.content {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-group {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.cancel-btn {
  margin-right: 20px;
}
</style>

